Vývoj rozšíření pro prohlížeče: Manifest V3 a JavaScript API

Rozšíření prohlížeče jsou malé softwarové programy, které přizpůsobují zážitek z prohlížení webu. Mohou přidávat nové funkce, upravovat obsah webových stránek, blokovat reklamy a mnoho dalšího. S příchodem Manifestu V3 prošel způsob, jakým se rozšíření vytvářejí a fungují, významnými změnami. Tento komplexní průvodce prozkoumá vývoj rozšíření prohlížeče s použitím Manifestu V3 a JavaScript API a poskytne vám znalosti potřebné k tvorbě výkonných a bezpečných rozšíření pro moderní prohlížeče.

Co jsou rozšíření prohlížeče?

Rozšíření prohlížeče jsou v podstatě mini-aplikace, které běží uvnitř webového prohlížeče. Rozšiřují jeho funkčnost a bezproblémově se integrují s webovými stránkami. Rozšíření jsou psána pomocí standardních webových technologií, jako jsou HTML, CSS a JavaScript, což je činí relativně dostupnými pro webové vývojáře.

Příklady populárních rozšíření prohlížeče zahrnují:

• Blokátory reklam: Blokují reklamy na webových stránkách, zlepšují rychlost prohlížení a snižují rušivé vlivy.
• Správci hesel: Bezpečně ukládají a spravují hesla a automaticky je vyplňují na webových stránkách.
• Rozšíření pro psaní poznámek: Umožňují uživatelům psát si poznámky a ukládat je přímo z webových stránek.
• Nástroje pro produktivitu: Zvyšují produktivitu poskytováním funkcí, jako je správa úkolů, sledování času a režimy soustředění.
• Nástroje pro překlad jazyků: Překládají webové stránky do různých jazyků jediným kliknutím. Příklad: rozšíření Google Překladač.
• VPN rozšíření: Přesměrovávají internetový provoz pro obcházení geografických omezení a zvýšení soukromí.

Význam Manifestu V3

Manifest V3 je nejnovější verze souboru manifestu, což je soubor JSON, který popisuje rozšíření pro prohlížeč. Definuje název rozšíření, verzi, oprávnění, skripty na pozadí a další základní metadata. Manifest V3 přináší několik klíčových změn ve srovnání se svým předchůdcem, Manifestem V2, a zaměřuje se především na bezpečnost a výkon.

Klíčové změny v Manifestu V3:

• Service Workers: Manifest V3 nahrazuje stránky na pozadí (background pages) service workery. Service workeři jsou skripty řízené událostmi, které běží na pozadí, aniž by vyžadovaly trvalou stránku. Jsou efektivnější a méně náročné na zdroje než stránky na pozadí.
• Declarative Net Request API: Toto API umožňuje rozšířením upravovat síťové požadavky, aniž by je přímo zachytávaly. Zvyšuje bezpečnost a výkon tím, že přenáší logiku filtrování na prohlížeč.
• Přísnější Content Security Policy (CSP): Manifest V3 vynucuje přísnější pravidla CSP, aby se zabránilo spouštění libovolného kódu, což dále zvyšuje bezpečnost.
• API založená na Promises: Mnoho API je nyní založeno na promises, což usnadňuje správu asynchronních operací.

Proč přechod na Manifest V3?

• Zvýšená bezpečnost: Manifest V3 je navržen tak, aby zlepšil bezpečnost rozšíření prohlížeče a chránil uživatele před škodlivým kódem.
• Zlepšený výkon: Service workeři a Declarative Net Request API přispívají k lepšímu výkonu a snížené spotřebě zdrojů.
• Větší soukromí: Manifest V3 si klade za cíl dát uživatelům větší kontrolu nad jejich daty a soukromím.

Nastavení vývojového prostředí

Než začnete vyvíjet rozšíření pro prohlížeče, musíte si nastavit vývojové prostředí. To zahrnuje instalaci editoru kódu, výběr prohlížeče pro testování a pochopení základní struktury souborů rozšíření.

1. Editor kódu

Vyberte si editor kódu, se kterým se vám dobře pracuje. Mezi populární možnosti patří:

• Visual Studio Code (VS Code): Bezplatný a výkonný editor kódu s vynikající podporou pro JavaScript a další webové technologie.
• Sublime Text: Rychlý a přizpůsobitelný editor kódu s širokou škálou pluginů.
• Atom: Bezplatný a open-source editor kódu vyvinutý společností GitHub.

2. Prohlížeč pro testování

Vyberte prohlížeč pro testování vašich rozšíření. Chrome a Firefox jsou nejoblíbenější volby, protože nabízejí robustní vývojářské nástroje a podporu pro vývoj rozšíření.

3. Základní struktura souborů

Rozšíření prohlížeče se obvykle skládá z následujících souborů:

• manifest.json: Tento soubor obsahuje metadata rozšíření, jako je jeho název, verze, oprávnění a skripty na pozadí.
• background.js (nebo skript service workera): Tento skript běží na pozadí a zpracovává události, jako jsou akce prohlížeče a kliknutí na kontextové menu.
• content.js: Tento skript běží v kontextu webových stránek a může upravovat jejich obsah.
• popup.html: Tento soubor definuje uživatelské rozhraní vyskakovacího okna rozšíření.
• popup.js: Tento skript zpracovává logiku vyskakovacího okna rozšíření.
• options.html: Tento soubor definuje uživatelské rozhraní stránky s nastavením rozšíření.
• options.js: Tento skript zpracovává logiku stránky s nastavením rozšíření.
• ikony: Jsou to ikony používané k reprezentaci rozšíření v liště nástrojů prohlížeče a na stránce pro správu rozšíření.

Vytvoření prvního rozšíření: "Hello, World!"

Pojďme vytvořit jednoduché rozšíření "Hello, World!", abychom si ukázali základní principy vývoje rozšíření pro prohlížeče.

1. Vytvořte soubor manifestu (manifest.json)

Vytvořte soubor s názvem `manifest.json` v novém adresáři a přidejte následující kód:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "Jednoduché rozšíření Hello, World!",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Vysvětlení:

• `manifest_version`: Určuje verzi souboru manifestu (3 pro Manifest V3).
• `name`: Název rozšíření.
• `version`: Číslo verze rozšíření.
• `description`: Stručný popis rozšíření.
• `permissions`: Pole oprávnění, která rozšíření vyžaduje (např. "storage").
• `action`: Definuje vlastnosti vyskakovacího okna rozšíření, včetně výchozího souboru popupu a ikon.
• `icons`: Určuje cesty k ikonám rozšíření.

2. Vytvořte soubor popupu (popup.html)

Vytvořte soubor s názvem `popup.html` ve stejném adresáři a přidejte následující kód:

  
  


  
Ahoj, světe!
  
Toto je jednoduché rozšíření prohlížeče.

Tento soubor definuje uživatelské rozhraní vyskakovacího okna rozšíření, které zobrazí zprávu "Ahoj, světe!".

3. Vytvořte obrázky ikon

Vytvořte tři obrázky ikon s následujícími rozměry: 16x16, 48x48 a 128x128 pixelů. Uložte je jako `icon16.png`, `icon48.png` a `icon128.png` do adresáře `images` ve vašem adresáři rozšíření.

4. Načtěte rozšíření do prohlížeče

Chrome:

1. Otevřete Chrome a přejděte na `chrome://extensions`.
2. V pravém horním rohu povolte "Režim pro vývojáře".
3. Klikněte na "Načíst nerozbalené" a vyberte adresář obsahující soubory vašeho rozšíření.

Firefox:

1. Otevřete Firefox a přejděte na `about:debugging#/runtime/this-firefox`.
2. Klikněte na "Načíst dočasný doplněk..." a vyberte soubor `manifest.json`.

Vaše rozšíření "Hello, World!" by nyní mělo být nainstalováno a viditelné v liště nástrojů prohlížeče. Kliknutím na ikonu rozšíření otevřete vyskakovací okno a uvidíte zprávu "Ahoj, světe!".

Práce s JavaScript API

Rozšíření prohlížeče mohou interagovat s prohlížečem a webovými stránkami pomocí JavaScript API. Tato API poskytují přístup k různým funkcím, jako jsou:

• Tabs API: Umožňuje spravovat karty prohlížeče, včetně vytváření, aktualizace a dotazování na karty.
• Storage API: Poskytuje způsob, jak trvale ukládat a načítat data v rámci rozšíření.
• Alarms API: Umožňuje naplánovat spuštění úkolů v určitých časech.
• Notifications API: Umožňuje zobrazovat oznámení uživateli.
• Context Menus API: Umožňuje přidávat vlastní položky do kontextového menu prohlížeče (menu pravého kliknutí).
• Web Request API (v Manifestu V3 Declarative Net Request): Umožňuje zachytávat a upravovat síťové požadavky.
• Scripting API: Umožňuje vkládat skripty do webových stránek.

Příklad: Použití Storage API

Vytvořme rozšíření, které ukládá a načítá jméno uživatele pomocí Storage API.

1. Aktualizujte soubor manifestu (manifest.json)

Ujistěte se, že pole `permissions` ve vašem `manifest.json` obsahuje `"storage"`:

{
  "manifest_version": 3,
  "name": "Příklad Storage",
  "version": "1.0",
  "description": "Rozšíření, které používá Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Vytvořte soubor popupu (popup.html)

Vytvořte nebo aktualizujte váš `popup.html` s následujícím obsahem:

  
  


  
Příklad Storage
  Zadejte své jméno:
  
  Uložit
  

  

3. Vytvořte skript popupu (popup.js)

Vytvořte soubor s názvem `popup.js` a přidejte následující kód:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Načtení uloženého jména z úložiště
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Ahoj, ${data.name}!`;
    }
  });

  // Uložení jména do úložiště po kliknutí na tlačítko
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Ahoj, ${name}!`;
    });
  });
});

Vysvětlení:

• Skript naslouchá události `DOMContentLoaded`, aby se zajistilo, že DOM je plně načten před spuštěním kódu.
• Získá reference na vstupní pole, tlačítko pro uložení a odstavec s pozdravem.
• Načte uložené jméno z úložiště pomocí `chrome.storage.sync.get()`.
• Uloží jméno do úložiště po kliknutí na tlačítko pro uložení pomocí `chrome.storage.sync.set()`.
• Aktualizuje odstavec s pozdravem uloženým nebo zadaným jménem.

Znovu načtěte rozšíření v prohlížeči. Nyní, když otevřete vyskakovací okno, můžete zadat své jméno, uložit ho a vidět pozdrav. Jméno bude uloženo v úložišti rozšíření a bude načteno při příštím otevření vyskakovacího okna.

Příklad: Použití Tabs API

Vytvořme rozšíření, které zobrazí URL aktuální karty ve vyskakovacím okně.

1. Aktualizujte soubor manifestu (manifest.json)

Přidejte oprávnění `"tabs"` do pole `permissions` ve vašem `manifest.json`:

{
  "manifest_version": 3,
  "name": "Příklad Tabs",
  "version": "1.0",
  "description": "Rozšíření, které používá Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Vytvořte soubor popupu (popup.html)

Vytvořte nebo aktualizujte váš `popup.html` s následujícím obsahem:

  
  


  
Příklad Tabs
  
URL aktuální karty:
  

  

3. Vytvořte skript popupu (popup.js)

Vytvořte soubor s názvem `popup.js` a přidejte následující kód:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Získání URL aktuální karty
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Vysvětlení:

• Skript naslouchá události `DOMContentLoaded`.
• Používá `chrome.tabs.query()` k získání aktuálně aktivní karty v aktuálním okně.
• Získá URL karty a zobrazí ji v odstavci `url`.

Znovu načtěte rozšíření v prohlížeči. Nyní, když otevřete vyskakovací okno, zobrazí se URL aktuální karty.

Skripty na pozadí a Service Workers

V Manifestu V3 jsou skripty na pozadí nahrazeny service workery. Service workeři jsou skripty řízené událostmi, které běží na pozadí, aniž by vyžadovaly trvalou stránku. Jsou efektivnější a méně náročné na zdroje než stránky na pozadí.

Klíčové vlastnosti Service Workerů:

• Řízené událostmi: Service workeři reagují na události, jako jsou akce prohlížeče, alarmy a zprávy z content skriptů.
• Asynchronní: Service workeři používají asynchronní API, aby se zabránilo blokování hlavního vlákna.
• Ukončení při nečinnosti: Service workeři jsou ukončeni, když aktivně nezpracovávají události, což šetří zdroje.

Příklad: Použití Service Workera

Vytvořme rozšíření, které zobrazí oznámení při spuštění prohlížeče.

1. Aktualizujte soubor manifestu (manifest.json)

Aktualizujte váš `manifest.json` s následujícím obsahem:

{
  "manifest_version": 3,
  "name": "Příklad Service Worker",
  "version": "1.0",
  "description": "Rozšíření, které používá service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Vysvětlení:

• Vlastnost `"background"` určuje cestu ke skriptu service workera (`background.js`).
• Pole `"permissions"` obsahuje `"notifications"`, což je vyžadováno pro zobrazování oznámení.

2. Vytvořte skript Service Workera (background.js)

Vytvořte soubor s názvem `background.js` a přidejte následující kód:

chrome.runtime.onStartup.addListener(() => {
  // Zobrazení oznámení při spuštění prohlížeče
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Prohlížeč spuštěn',
    message: 'Prohlížeč byl spuštěn.',
  });
});

Vysvětlení:

• Skript naslouchá události `chrome.runtime.onStartup`, která se spustí při spuštění prohlížeče.
• Používá `chrome.notifications.create()` k zobrazení oznámení se zadanými vlastnostmi.

Znovu načtěte rozšíření v prohlížeči. Nyní, když restartujete prohlížeč, měli byste vidět oznámení od rozšíření.

Skripty obsahu (Content Scripts)

Skripty obsahu (Content scripts) jsou soubory JavaScript, které běží v kontextu webových stránek. Mohou přistupovat k DOM webových stránek a upravovat jej, což vám umožňuje přizpůsobit chování a vzhled webových stránek.

Klíčové vlastnosti skriptů obsahu:

• Přístup k DOM: Skripty obsahu mohou přistupovat k DOM webových stránek a manipulovat s ním.
• Izolace od skriptů webové stránky: Skripty obsahu běží v izolovaném prostředí, což zabraňuje konfliktům se skripty webové stránky.
• Komunikace se skripty na pozadí: Skripty obsahu mohou komunikovat se skripty na pozadí pomocí předávání zpráv.

Příklad: Použití skriptu obsahu

Vytvořme rozšíření, které změní barvu pozadí webových stránek na světle modrou.

1. Aktualizujte soubor manifestu (manifest.json)

Aktualizujte váš `manifest.json` s následujícím obsahem:

{
  "manifest_version": 3,
  "name": "Příklad Content Script",
  "version": "1.0",
  "description": "Rozšíření, které používá content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Vysvětlení:

• Vlastnost `"content_scripts"` určuje pole skriptů obsahu, které mají být vloženy do webových stránek.
• `"matches"` určuje URL, do kterých má být skript obsahu vložen (`` odpovídá všem URL).
• `"js"` určuje cestu ke skriptu obsahu (`content.js`).
• Pole `"permissions"` obsahuje `"activeTab"` a `"scripting"`, které jsou vyžadovány pro vkládání skriptů.

2. Vytvořte skript obsahu (content.js)

Vytvořte soubor s názvem `content.js` a přidejte následující kód:

document.body.style.backgroundColor = 'lightblue';

3. Vytvořte Service Worker (background.js)

Vytvořte soubor s názvem `background.js` a přidejte následující kód:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Vysvětlení:

• Skript obsahu jednoduše nastaví barvu pozadí elementu `body` na světle modrou.
• Service worker naslouchá události kliknutí a spustí funkci v rámci aktuální karty, která změní barvu pozadí.

Znovu načtěte rozšíření v prohlížeči. Nyní, když otevřete jakoukoli webovou stránku, barva pozadí bude světle modrá.

Ladění rozšíření prohlížeče

Ladění rozšíření prohlížeče je nezbytnou součástí vývojového procesu. Chrome a Firefox poskytují vynikající vývojářské nástroje pro ladění rozšíření.

Ladění v Chrome:

1. Otevřete Chrome a přejděte na `chrome://extensions`.
2. V pravém horním rohu povolte "Režim pro vývojáře".
3. Klikněte na "Zkontrolovat zobrazení: stránka na pozadí" pro vaše rozšíření. Tím se otevřou Chrome DevTools pro skript na pozadí.
4. Chcete-li ladit skripty obsahu, otevřete webovou stránku, kde je skript obsahu vložen, a poté otevřete Chrome DevTools pro tuto stránku. Váš skript obsahu byste měli vidět v panelu "Zdroje".

Ladění ve Firefoxu:

1. Otevřete Firefox a přejděte na `about:debugging#/runtime/this-firefox`.
2. Najděte své rozšíření v seznamu a klikněte na "Prozkoumat". Tím se otevřou Firefox Developer Tools pro rozšíření.
3. Chcete-li ladit skripty obsahu, otevřete webovou stránku, kde je skript obsahu vložen, a poté otevřete Firefox Developer Tools pro tuto stránku. Váš skript obsahu byste měli vidět v panelu "Ladicí program".

Běžné techniky ladění:

• Logování do konzole: Použijte `console.log()` k tisku zpráv do konzole.
• Breakpointy: Nastavte breakpointy ve svém kódu pro pozastavení provádění a kontrolu proměnných.
• Zdrojové mapy (Source maps): Použijte zdrojové mapy k ladění vašeho kódu v jeho původní podobě, i když byl minifikován nebo transpilován.
• Zpracování chyb: Implementujte zpracování chyb pro zachycení a logování chyb.

Publikování vašeho rozšíření

Jakmile jste vyvinuli a otestovali své rozšíření, můžete ho publikovat v Chrome Web Store nebo na tržišti doplňků Firefox Add-ons.

Publikování v Chrome Web Store:

1. Vytvořte si vývojářský účet v Chrome Web Store.
2. Zabalte své rozšíření do souboru `.zip`.
3. Nahrajte soubor `.zip` do Chrome Web Store.
4. Poskytněte požadovaná metadata, jako je název rozšíření, popis a snímky obrazovky.
5. Odešlete své rozšíření ke kontrole.

Publikování na tržišti Firefox Add-ons:

1. Vytvořte si vývojářský účet na tržišti Firefox Add-ons.
2. Zabalte své rozšíření do souboru `.zip`.
3. Nahrajte soubor `.zip` na tržiště Firefox Add-ons.
4. Poskytněte požadovaná metadata, jako je název rozšíření, popis a snímky obrazovky.
5. Odešlete své rozšíření ke kontrole.

Doporučené postupy pro publikování:

• Napište jasný a stručný popis vašeho rozšíření.
• Poskytněte vysoce kvalitní snímky obrazovky a videa, které představí funkce vašeho rozšíření.
• Před odesláním své rozšíření důkladně otestujte.
• Rychle reagujte na recenze a zpětnou vazbu od uživatelů.
• Udržujte své rozšíření aktuální s nejnovějšími verzemi prohlížečů a bezpečnostními záplatami.

Bezpečnostní aspekty

Bezpečnost je klíčovým aspektem vývoje rozšíření pro prohlížeče. Rozšíření mohou potenciálně přistupovat k citlivým uživatelským datům a upravovat obsah webových stránek, proto je nezbytné dodržovat osvědčené postupy v oblasti bezpečnosti, aby byli uživatelé chráněni před škodlivým kódem.

Klíčové bezpečnostní aspekty:

• Minimalizujte oprávnění: Požadujte pouze ta oprávnění, která vaše rozšíření skutečně potřebuje.
• Validujte uživatelský vstup: Ošetřujte a validujte veškerý uživatelský vstup, abyste předešli útokům typu cross-site scripting (XSS).
• Používejte HTTPS: Pro komunikaci se vzdálenými servery vždy používejte HTTPS.
• Content Security Policy (CSP): Vynucujte přísné CSP, abyste zabránili spouštění libovolného kódu.
• Pravidelně aktualizujte své rozšíření: Udržujte své rozšíření aktuální s nejnovějšími bezpečnostními záplatami.

Dodržováním těchto bezpečnostních pokynů můžete pomoci zajistit, že vaše rozšíření prohlížeče bude pro uživatele bezpečné.

Závěr

Vývoj rozšíření pro prohlížeče pomocí Manifestu V3 a JavaScript API nabízí účinný způsob, jak přizpůsobit zážitek z prohlížení a přidat nové funkce do webových prohlížečů. Porozuměním klíčovým konceptům, API a osvědčeným postupům uvedeným v tomto průvodci můžete vytvářet výkonná a bezpečná rozšíření, která zvyšují produktivitu, zlepšují bezpečnost a poskytují lepší zážitek z prohlížení uživatelům po celém světě. Jak se web neustále vyvíjí, budou rozšíření prohlížeče hrát stále důležitější roli při formování budoucnosti online interakcí. Využijte příležitosti, které přináší Manifest V3 a bohatství JavaScript API, k budování inovativních a cenných rozšíření.